import React from "react";
import {Button as AntdButton, Checkbox as AntdCheckbox, Divider, Spin} from 'antd';
import {VJsonComponent} from "../../factory";
import _ from 'lodash'
import {YvanEvent} from "../../types";
import {apply, YvanEventDispatch} from "../../utils/helper";
import {DataComponentProp} from "../../datasource";
import {FormItemBaseState, FormItemVJSon, VJsonFormItemBase} from "./VJsonFormItemBase";

const {Group: AntdCheckboxGroup} = AntdCheckbox;

export interface CheckboxGroupVJsonProp extends FormItemVJSon<CheckboxGroup> {
    /**
     * multiple / tags 多个值的情况下，值的分隔符
     */
    valueSpliter: string

    onChange?: YvanEvent<CheckboxGroup>
}

export interface CheckboxGroupVJsonDataProp extends CheckboxGroupVJsonProp, DataComponentProp<CheckboxGroup> {

}

export interface CheckboxGroupState extends FormItemBaseState<CheckboxGroup> {
}

@VJsonComponent({
    view: 'checkboxgroup'
})
//@ts-ignore
export default class CheckboxGroup extends VJsonFormItemBase<CheckboxGroup, CheckboxGroupVJsonDataProp, CheckboxGroupState> {
    static defaultProps = {
        ...VJsonFormItemBase.defaultProps,
        idField: 'value',
        labelField: 'label',
        data: [],
        rules: [],
        visible: true,
        loading: false,
        checkAll: false,
        valueSpliter: ','
    }

    constructor(props: any) {
        super(props, CheckboxGroup.defaultProps);

        if (this.valueIsArray()) {
            this.defaultValue = this.valueSplit(this.defaultValue)
        }
    }

    private valueSplit(value?: string | string[]) {
        if (_.isArray(value)) {
            return value
        }
        if (!value) {
            return []
        }
        return value.split(this.props.vjson.valueSpliter)
    }

    private valueJoin(value?: string | string[]) {
        if (_.isArray(value)) {
            return value.join(this.props.vjson.valueSpliter)
        }
        if (!value) {
            return ''
        }
        return value
    }

    private valueIsArray() {
        return true
    }

    protected onValueChange(value: any) {
        value = this.valueJoin(value)
        this.value = value
        YvanEventDispatch(this.props.vjson.onChange, this, value)
    }

    /**
     * 从控件值到实体 (control -> entity) 的转换 normalizeToEntity
     */
    normalizeToEntity(value: any) {
        if (this.valueIsArray()) {
            return this.valueJoin(value)
        }
        return value
    }

    /**
     * 从实体值到控件 (entity -> control) 的转换 normalizeToEntity
     */
    normalizeToControl(value: any) {
        if (this.valueIsArray()) {
            return this.valueSplit(value)
        } else {
            return this.valueJoin(value)
        }
    }

    protected renderWrapper(): JSX.Element {
        console.log('RenderCheckboxGroup', this.toString())

        const options = _.map(this.data, (item) => {
            const value = '' + item[this.props.vjson.idField || 'value']
            const label = '' + item[this.props.vjson.labelField || 'label']
            return {
                label, value
            }
        })

        return (
            //@ts-ignore
            <Spin spinning={this.loading} key={this.key} view_id={this.key} aria-roledescription={this.view}>
                <AntdCheckboxGroup
                    options={options}
                    value={this.valueSplit(this.value)}
                    disabled={apply(this, this.props.vjson.disabled)}
                    onChange={this.onValueChange.bind(this)}
                />
            </Spin>
        )
    }
}
